<template>
  <div ref="mutiLineStackChartRef" :style="{width: width,height: height}"></div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, shallowRef, watch, nextTick} from 'vue';
import {ECharts, init} from "echarts";
import {useThemeConfig} from "/@/stores/themeConfig";
import {storeToRefs} from "pinia";
import theme from "/@/components/chart/theme";
import * as echarts from "echarts";

export default defineComponent({
  name: 'MutiLineStackChart',
  props: {
    data: {
      type: String,
      default: () => 'wangeditor',
    },
    width: {
      type: String,
      default: () => '1000px',
    },
    height: {
      type: String,
      default: () => '600px',
    }
  },
  setup(props, {emit}) {
    const mutiLineStackChartRef = ref<HTMLElement>();
    const echartInstance = shallowRef<ECharts>();
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const state = reactive({
      theme: '',
      bgColor: 'transparent',
      titleColor: '#303133',
    });
    watch(() => themeConfig.value.isCollapse,
        (newVal) => {
          nextTick(() => {
            setTimeout(() => {
              initLineChart();
            }, 500);
          });
        },
        {
          deep: true,
          immediate: true,
        })
    onMounted(() => {
      setTimeout(() => {
        initLineChart();
      }, 500);
    });
    const initLineChart = () => {
      if (echartInstance.value) echartInstance.value.dispose();
      const labelOption = {
        show: true,
        // position: app.config.position,
        // distance: app.config.distance,
        // align: app.config.align,
        // verticalAlign: app.config.verticalAlign,
        // rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      echartInstance.value = init(mutiLineStackChartRef.value, state.theme);
      const option = {
        // backgroundColor: state.charts.bgColor,
        title: {
          text: '测试数据',
          x: 'left',
          textStyle: {fontSize: '15'},
        },
        grid: {top: 70, right: 20, bottom: 30, left: 30},
        tooltip: {trigger: 'axis'},
        legend: {data: ['预购队列', '最新成交价'], right: 0},
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: [
          {
            type: 'value',
            name: '价格',
            splitLine: {show: true, lineStyle: {type: 'dashed', color: '#f5f5f5'}},
          },
        ],
        series: [
          {
            name: '预购队列',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
            lineStyle: {color: '#fe9a8b'},
            itemStyle: {color: '#fe9a8b', borderColor: '#fe9a8b'},
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#fe9a8bb3'},
                {offset: 1, color: '#fe9a8b03'},
              ]),
            },
          },
          {
            name: '最新成交价',
            type: 'line',
            symbolSize: 6,
            symbol: 'circle',
            smooth: true,
            data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
            lineStyle: {color: '#9E87FF'},
            itemStyle: {color: '#9E87FF', borderColor: '#9E87FF'},
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#9E87FFb3'},
                {offset: 1, color: '#9E87FF03'},
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {offset: 0, color: '#9E87FF'},
                    {offset: 0.4, color: '#9E87FF'},
                    {offset: 0.5, color: '#fff'},
                    {offset: 0.7, color: '#fff'},
                    {offset: 0.8, color: '#fff'},
                    {offset: 1, color: '#fff'},
                  ],
                },
                borderColor: '#9E87FF',
                borderWidth: 2,
              },
            },
          },
        ],
      };
      echartInstance.value.setOption(option);
      window.addEventListener('resize', () => {
        echartInstance.value && echartInstance.value.resize()
      });
    };
    return {
      themeConfig,
      echartInstance,
      mutiLineStackChartRef,
      ...toRefs(state),
    };
  },
});
</script>
